<template>
  <div id="index">
    <el-row>
      <el-col>
        <div id="main">
          <div id="title">课程管理系统</div>
          <el-form :model="loginForm" :rules="rules" ref="loginForm" class="form">
            <el-form-item prop="username">
              <el-input placeholder="用户名" v-model="loginForm.username">
                <template slot="prepend">
                  <i class="el-icon-user"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="密码" v-model="loginForm.password">
                <template slot="prepend">
                  <i class="el-icon-edit"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-radio-group v-model="loginForm.type">
                <el-radio :label="0" class="radio">学生</el-radio>
                <el-radio :label="1" class="radio">教师</el-radio>
                <el-radio :label="2" class="radio">教务管理员</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item class="form-button">
              <el-button type="primary" @click="submitForm" class="button">登录</el-button>
              <el-button class="button" @click="deleteData">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import {get,post} from "../common/request";
import jwt_decode from "jwt-decode";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
        type: 2
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          post("/sys/dologin", this.loginForm).then(x => {
            if (x.code === 1) {
              // this.$message.success(x.msg);
              let token = jwt_decode(x.data);
              let UserInfo = token.user;

              //保存数据到 Vuex
              this.$store.dispatch('asyncUpdateUser', UserInfo);
              this.$store.dispatch('asyncUpdateToken', x.data);
              //保存到浏览器本地空间
              sessionStorage.setItem('state', JSON.stringify(this.$store.state));
              this.$message.success(x.msg);
              this.$router.push("/Home");
            } else {
              this.$message.error(x.msg);
            }
          })
        } else {
          this.$message.error('登录失败，请重新登录');
          return false;
        }
      });
    },
    deleteData() {
      this.loginForm.username = "";
      this.loginForm.password = "";
      this.loginForm.type = 0;
    }
  }
}
</script>

<style scoped>
#index {
  background-image: url("../assets/login-background.jpeg");
  background-size: cover;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

#main {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#title {
  color: white;
  font-size: 24px;
  padding: 30px;
}

.form {
  border-top: 1px solid white;
  padding: 45px 40px 20px 40px;
}

.radio {
  color: white;
}

.form-button {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.button {
  width: 100px;
}
</style>
